<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div > input:first-child{background-color: red;}
    /* p > span:first-child{color:yellow}; */
    body > div:first-child{color:blueviolet}
    div > span:first-child{color:yellow}
    p:first-child{color:yellow}
    p:last-child{color:red}
</style>

<body>
    <p>A</p>
    <p>B</p>
    <h1>组合选择符</h1>
    <strong> 层级选择器 </strong>
    <pre>
        后代选择器(以空格     分隔)
        子元素选择器(以大于 > 号分隔）
        相邻兄弟选择器（以加号 + 分隔）
        普通兄弟选择器（以波浪号 ～ 分隔）
    </pre>
    <style>
        /* div ~ input {background-color: red;} */
    </style>
   <input type="text">
   <input type="text">
   <div><span>fsdafsd</span></div>
   <input type="text">
   <input type="text">

   <h1>伪类</h1>
   <strong> 超级链接 状态  : 伪类 </strong>

   <pre>
        a:link {color:#FF0000;} /* 未访问的链接 */
        a:visited {color:#00FF00;} /* 已访问的链接 */
        a:hover {color:#FF00FF;} /* 鼠标划过链接 */
        a:active {color:#0000FF;} /* 已选中的链接 */
        :first-child  : 查找所有父元素下面的第一个子素是什么的选择器 first-child 要把style内部部放到body外面
            EX : p:first-child  找所有元素下在第一个元素为p元素的方法 ,选择器最终选择的是这个p元素
        :last-child   : 与上面相同，查找最后一个    
            EX : p:first-child{color:red}
        :nth-child(2) 按位置
            EX : p:nth-child(2){color:yellow}
        自己练习 
        :checked	input:checked	选择所有选中的表单元素
        :disabled	input:disabled	选择所有禁用的表单元素
        :empty	p:empty	选择所有没有子元素的p元素
        :enabled	input:enabled	选择所有启用的表单元素
        :not(selector) 选择所有p以外的元素
        :only-child   只有一个孩子 的
        :focus  得焦点以后添加样式 
        :first-letter 应用不高
        :before	p:before	在每个<p>元素之前插入内容
        :after	p:after	在每个<p>元素之后插入内容
   </pre>
   <p>中国人</p>

   <p><span>s</span><span>s</span><span>s</span>fdsfsdf</p>
   
   <input type="checkbox" checked>
   <input type="radio" checked>

   <select name="" id="" disabled>

   </select>

   <div>
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">
   </div>


</body>
</html>
